<template>
<!--pages/my/my_reply.wxml-->
<view class="container">
    <view class="reply_top">
        <view class="fl">整体评价</view>
        <view class="p70 clearfix">
            <view class="clearfix fl">
                <view :class="'stars ' + (score >= 1 ? 'active' : '')" @tap="clickscore" data-score="1"></view>
                <view :class="'stars ' + (score >= 2 ? 'active' : '')" @tap="clickscore" data-score="2"></view>
                <view :class="'stars ' + (score >= 3 ? 'active' : '')" @tap="clickscore" data-score="3"></view>
                <view :class="'stars ' + (score >= 4 ? 'active' : '')" @tap="clickscore" data-score="4"></view>
                <view :class="'stars ' + (score == 5 ? 'active' : '')" @tap="clickscore" data-score="5"></view>
            </view>
            <view class="score fl" v-if="score == 5">优</view>
            <view class="score fl" v-else-if="score == 4">良</view>
            <view class="score fl" v-else-if="score == 3">中</view>
            <view class="score fl" v-else-if="score == 2">差</view>
            <view class="score fl" v-else-if="score == 1">很差</view>
        </view>
    </view>
    <view class="reply_mod">
        <textarea placeholder="你的意见很重要，来点评一下吧！" auto-height="true" @input="textarea"></textarea>
    </view>
    <view class="reply_end">
        <view class="tit">请选择您要点赞的商品</view>
        <view class="tit_list">
            <block v-for="(item, good_list) in good_list" :key="good_list">
                <view :class="'list ' + (item['active'] == true ? 'active' : '')" @tap="clicknum" :data-index="index">{{item.name}}</view>
            </block>
        </view>
    </view>
    <view class="submit" @tap="go_sub">提交评价</view>
</view> 

</template>

"<script>
// pages/my/my_reply.js
import common from '../../utils/common.js'
var app = getApp();
var newtext = '';

export default {
  data() {
    return {
      num: 0,
      score: 5,
      order_id: 0,
      good_list: []
    };
  },

  onUnload: function () {// 页面关闭
  },
  onHide: function () {// 页面隐藏
  },
  onShow: function () {// 页面显示
  // #ifdef H5
  common.hideWxShare()
  // #endif
  },
  onReady: function () {// 页面渲染完成
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      order_id: options.order_id
    });
    common.post('My&a=shop_feedback', {
      order_id: options.order_id
    }, "setOneContent", this);
    console.log(options.order_id);
  },
  components: {},
  props: {},
  methods: {
    clickscore: function (e) {
      this.setData({
        score: e.currentTarget.dataset.score
      });
    },
    clicknum: function (e) {
      var good_list = this.good_list;
      good_list[e.currentTarget.dataset.index].active = !good_list[e.currentTarget.dataset.index].active;
      this.setData({
        good_list: good_list
      });
    },
    textarea: function (e) {
      newtext = e.detail.value;
    },
    setOneContent: function (result) {
      console.log(result);
      this.setData({
        good_list: result
      });
      wx.hideToast();
    },
    go_sub: function (e) {
      var goods_ids = [];

      for (var i in this.good_list) {
        if (this.good_list[i].active == true) {
          goods_ids.push(this.good_list[i].goods_id);
        }
      }

      common.post('My&a=add_comment', {
        order_id: this.order_id,
        goods_ids: goods_ids,
        whole: this.score,
        textAre: newtext
      }, "saveReply", this);
    },
    saveReply: function (res) {
      wx.navigateBack();
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
/* pages/my/my_reply.css */
page{ background: #fff; }
.container{ padding-bottom:80rpx; }
.reply_top .p70{ margin-left: 140rpx;}
.reply_top{ line-height: 40rpx; padding:30rpx 30rpx 30rpx 30rpx; font-size: 30rpx; height: 40rpx; }
.reply_mod{ padding:20rpx 30rpx 30rpx 30rpx; line-height: 30rpx;}
.reply_mod textarea{ width: 94%; border: #f1f1f1 2rpx solid; padding:3%;  text-justify: kashida; min-height: 100rpx;}
.reply_end{ padding:20rpx 30rpx 0rpx 30rpx; line-height: 30rpx;}
.tit_list .list{ padding: 10rpx 30rpx; display: inline-block; border: #f1f1f1 2rpx solid; border-radius: 30rpx; margin-top: 30rpx; margin-right: 24rpx;}
.tit_list .list.active{ background: #ff2d4b; border: #ff2d4b 2rpx solid; color: #fff; }
.submit{ position: fixed; bottom: 0rpx; left:0rpx; width: 100%; line-height: 100rpx; height: 100rpx; text-align: center; color: #fff; background: #ff2d4b;}
.reply_top .stars{ float: left; width: 40rpx; height: 40rpx; background: url(https://hf.pigcms.com/tpl/Wap/default/static/images/big_normal@2x_66045a4.png) center no-repeat; background-size: 40rpx 40rpx;}
.reply_top .stars.active{ background: url(https://hf.pigcms.com/tpl/Wap/default/static/images/big_selected@2x_7b64c91.png) center no-repeat; background-size: 40rpx 40rpx;}
.reply_top .score{ margin-left: 20rpx;}
</style>